<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>pixi learn 1</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
    canvas {
      display: block;
      background: blue;
    }
  </style>
</head>
<body>
<canvas id="mycanvas"></canvas>
<script src="../lib/pixi.js"></script>
<script type="text/javascript">
  const canvas = document.getElementById('mycanvas')
  const app = new PIXI.Application({
    view: canvas,
    width: window.innerWidth,
    height: window.innerHeight
  })
  // document.body.appendChild(app.view)

  // const texture = PIXI.Texture.from('../assets/24-pineapple-fruit-png-image.png')
  const texture = PIXI.Texture.from('../assets/bunny.png')
  const img = new PIXI.Sprite(texture)
  img.x = app.renderer.width / 2
  img.y = app.renderer.height / 2
  img.anchor.x = 0.5
  img.anchor.y = 0.5
  // img.scale.x = 0.2
  // img.scale.y = 0.2
  app.stage.addChild(img)

  // setInterval(function () {
  //   img.width += 1
  //   img.height += 1
  // }, 100)
  app.ticker.add(animate)
  function animate() {
    img.rotation += 0.01
    img.width += 1
  }

</script>
</body>
</html>
